import React, { Component } from 'react';
import { List } from 'antd-mobile';
import styles from './me.css'

import fetchUtil from "../utils/fetchUtil";
import { getUserToken,getUserInfo } from './actions';

const Item = List.Item;
const Brief = Item.Brief;

class Me extends Component {

    constructor(props){
        super(props);

        this.state = {
            name:'',
            headImg:'',
            wallet:0
        }
    }

    componentDidMount(){
       getUserToken((token) => {
            getUserInfo(token).then((data) => {
                    this.setState({
                        name:data.name,
                        headImg:data.headImg,
                        wallet:data.wallet
                    })
            })
       });
    }

    render(){
        return (
        <div className ={styles.container}>
            <div className={styles.header}>
                <div className={styles.imgDiv}>
                    <img className={styles.img} src={this.state.headImg}
                     style={{}} />
                </div>
                <div className={styles.name}>
                    {this.state.name}
                </div> 
            </div>

            <List renderHeader={() => '账户信息'}>
                <Item
                thumb={require('../image/money.png')}
                arrow="horizontal"
                extra={`${this.state.wallet/100}元`}
                onClick={() => {}}
                >我的余额</Item>
                <Item
                thumb={require('../image/trade.png')}
                arrow="horizontal"
                onClick={() => {this.props.history.push('/tradelist')}}
                >交易明细</Item>
            </List>

            <List renderHeader={() => '兑换'}>
                <Item
                thumb={require('../image/duihuan.png')}
                arrow="horizontal"
                onClick={() => {this.props.history.push('/exchange')}}
                >兑换码</Item>
            </List>
        </div>
        )
    }
}

export default Me;

